<script setup lang="ts">
import { ref, onMounted, computed } from 'vue';
import { Icon } from '@iconify/vue';
import { useI18n } from 'vue-i18n';
import AOS from 'aos';
import 'aos/dist/aos.css';

const { t } = useI18n();

onMounted(() => {
    AOS.init({
        duration: 1000,
        offset: 100,
        once: true,
        easing: 'ease-in-out'
    });
});

// 使用i18n中的FAQ数据
const faqItems = computed(() => [
    {
        id: 1,
        expanded: false,
        question: t('faq.question1'),
        answer: t('faq.answer1'),
        icon: 'mdi:account-group'
    },
    {
        id: 2,
        expanded: false,
        question: t('faq.question2'),
        answer: t('faq.answer2'),
        icon: 'mdi:cloud'
    },
    {
        id: 3,
        expanded: false,
        question: t('faq.question3'),
        answer: t('faq.answer3'),
        icon: 'mdi:rocket-launch'
    },
    {
        id: 4,
        expanded: false,
        question: t('faq.question4'),
        answer: t('faq.answer4'),
        icon: 'mdi:shield-lock'
    },
    {
        id: 5,
        expanded: false,
        question: t('faq.question5'),
        answer: t('faq.answer5'),
        icon: 'mdi:account-multiple'
    },
    {
        id: 6,
        expanded: false,
        question: t('faq.question6'),
        answer: t('faq.answer6'),
        icon: 'mdi:lifebuoy'
    },
    {
        id: 7,
        expanded: false,
        question: t('faq.question7'),
        answer: t('faq.answer7'),
        icon: 'mdi:database-import'
    },
    {
        id: 8,
        expanded: false,
        question: t('faq.question8'),
        answer: t('faq.answer8'),
        icon: 'mdi:gift'
    }
]);

const faqs = ref(faqItems.value);

const toggleAnswer = (id: number) => {
    const item = faqs.value.find(q => q.id === id);
    if (item) {
        item.expanded = !item.expanded;
    }
};
</script>

<template>
  <div class="py-16 overflow-hidden bg-light-blue-lighten-5" id="faq">
    <v-container>
      <div class="maxWidth">
        <v-row class="justify-center">
          <v-col cols="12" sm="10" lg="8" class="text-center" data-aos="fade-up">
            <h2 class="sectionTitle font-weight-bold">
              {{ t('FAQ') }}
            </h2>
            <p class="text-h6 mt-4">
              {{ t('FAQ Desc') }}
            </p>
          </v-col>
        </v-row>
        
        <v-row class="mt-12 justify-center">
          <v-col cols="12" md="10" lg="8">
            <div 
              v-for="(faq, index) in faqs" 
              :key="faq.id" 
              class="mb-6"
              :data-aos="faq.id % 2 === 0 ? 'fade-left' : 'fade-right'"
              :data-aos-delay="(faq.id - 1) * 100"
            >
              <v-card 
                class="faq-card overflow-hidden"
                :class="{'active': faq.expanded}"
                rounded="lg"
                elevation="9"
                @click="toggleAnswer(faq.id)"
              >
                <v-card-item class="pt-6 pb-6">
                  <div class="d-flex align-center">
                    <v-avatar 
                      :color="faq.expanded ? 'primary' : 'grey-lighten-3'" 
                      size="60" 
                      class="mr-5 transition-fast-in-fast-out"
                    >
                      <Icon 
                        :icon="faq.icon" 
                        :color="faq.expanded ? 'white' : 'primary'" 
                        size="32" 
                      />
                    </v-avatar>
                    <div>
                      <h3 class="text-h6 font-weight-bold mb-1">{{ faq.question }}</h3>
                      <p v-if="faq.expanded" class="text-body-1 mt-3 answer-text">
                        {{ faq.answer }}
                      </p>
                    </div>
                    <v-spacer></v-spacer>
                    <v-icon 
                      :icon="faq.expanded ? 'mdi-chevron-up' : 'mdi-chevron-down'"
                      size="24"
                      class="mr-2 transition-fast-in-fast-out"
                      :color="faq.expanded ? 'primary' : 'grey-darken-1'"
                    ></v-icon>
                  </div>
                </v-card-item>
              </v-card>
            </div>
          </v-col>
        </v-row>
        
        <v-row class="mt-16 justify-center text-center">
          <v-col cols="12" sm="10" md="8" data-aos="fade-up" data-aos-delay="400">
            <v-card class="support-card py-8 px-6" rounded="lg" elevation="9">
              <h3 class="text-h5 font-weight-bold mb-4">
                {{ t('Other Questions') }}
              </h3>
              <p class="text-body-1 mb-6">
                {{ t('Contact Support') }}
              </p>
              <v-btn 
                color="primary" 
                size="large"
                href="#contact"
                class="px-8"
                elevation="10"
                data-aos="zoom-in"
                data-aos-delay="600"
              >
                {{ t('Contact Us') }}
              </v-btn>
            </v-card>
          </v-col>
        </v-row>
      </div>
    </v-container>
  </div>
</template>

<style scoped>
.faq-card {
  cursor: pointer;
  transition: all 0.3s ease;
  border-left: 5px solid transparent;
}

.faq-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 15px rgba(0, 0, 0, 0.09) !important;
}

.faq-card.active {
  border-left: 5px solid var(--v-primary-base);
  background-color: #f8faff;
}

.answer-text {
  animation: fadeIn 0.5s ease;
}

.support-card {
  background: linear-gradient(135deg, #f8faff 0%, #e6f0ff 100%);
  border-top: 4px solid var(--v-primary-base);
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.transition-fast-in-fast-out {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
</style> 